<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/commonStatic::commonStaticHeader"></div>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 th:text="${title}"></h1>
<div class="container">
    <el-row :gutter="0">
        <el-col :span="6" :offset="10">
            <el-form :model="user" :rules="rules" ref="user" label-position="left">
                <el-form-item prop="username">
                    <el-input v-model="user.username">
                        <template slot="prepend">
                            <i class="el-icon-user"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="user.password">
                        <template slot="prepend">
                            <i class="el-icon-camera"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <div>
                    <img th:src="@{/login/getVertifyCode}" alt="">
                </div>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('user')" style="display: block;width: 100%;">立即创建
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: ".container",
        data: {
            user: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    {required: true, message: '用户名不能为空', trigger: 'blur'},
                    {min: 3, max: 10, message: '用户名长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '密码不能为空', trigger: 'blur'},
                    {min: 3, max: 10, message: '密码长度在 3 到 5 个字符', trigger: 'blur'}
                ],
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        axios.post("http://localhost:8080/login/loginSys", this.user).then(res => {
                            console.log(res);
                        }).catch(res => {
                            console.log(res);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    })
</script>
</html>